<!-- 新增申领 -->
<template>
	<view style="padding-bottom: 160rpx;">
		<view class="p-3">
			<u--form errorType="toast" labelWidth="80" :labelStyle="{fontSize:'28rpx'}" labelPosition="left"
				:model="postData" :rules="rules" ref="uForm">
				<view class="bt-block p-2"> 
					<u-form-item label="姓名">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{$store.state.user.name}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="身份证号">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{$store.state.user.idCard}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="手机号">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{$store.state.user.phone}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="项目名称" prop="projectId">
						<view class="form-block">
							<bg-select :value.sync="postData.projectId" :columns="projectList" key="projectId"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="申领物资" prop="materialId">
						<view class="form-block">
							<bg-select @select-change="materialSelect" :value.sync="postData.materialId" :columns="materialList" key="materialId"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="申领数量">
						<view class="form-block">
							<u-number-box :min="1" v-model="postData.applyCount" :step="1"></u-number-box>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="单价价格">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{postData.unitPrice}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="合计总价">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{totalPrice}}</view>
					</u-form-item>
				</view>
				<view class="bt-block mt-3 px24py30">
					<bg-title>
						<text>温馨提示</text>
					</bg-title>
					<view class="mt-3 font-14 text-grey2 font-normal">
						申领人领用的本物资如有损坏丢失，需照本申领单约定照价赔偿，此费要从申领人劳动报酬中扣除，领取人同意请在下方申领签字
					</view>
				</view>
				<view class="bt-block mt-3 pl-3">
					<u-form-item required label="申领人签字" labelWidth="120" labelPosition="top">
					</u-form-item>
					<view class="pb-3 pr-3">
						<bg-sign @sign-success="SignHandler"></bg-sign>
					</view>
				</view>
				<view class="bt-block mt-3 pl-3">
					<u-form-item required label="物资照片" labelWidth="120" labelPosition="top">
					</u-form-item>
					<view class="mb-3">
						<bg-upload key="signedImg" :value.sync="postData.materialImgs"
							:count="9"></bg-upload>
					</view>
				</view>
			</u--form>
		</view>
		<view class="bt-footer">
			<bg-btn @tap="saveData">提交</bg-btn>
		</view>
	</view>
</template>

<script>
	import { saveApply } from '../../../api/apply'
	export default {
		mounted() {
			this.$store.dispatch("types/getProjects").then(res=>{
				this.projectList = res
			})
			this.$store.dispatch("types/getMaterials").then(res=>{
				this.materialList = res
			})
		},
		computed:{
			totalPrice(){
				if(this.postData.unitPrice){
					return this.postData.unitPrice * this.postData.applyCount
				} else {
					return 0
				}
			}
		},
		data() {
			return {
				materialList:[],
				projectList:[],
				postData: {
					"createUserId": this.$store.getters.userId,
					"projectId": '',
					"materialId": '',
					"applyCount": 1,
					"unitPrice": 0,
					"materialImgs": "",
					"status": "",
					"totalAmount": 0,
					"signedImg": "",
					"auditUserId": 0
				},
				model: {},
				rules: {
					'materialId': {
						type:'number',
						required: true,
						message: '请选择物资',
					},
					'projectId': {
						type:'number',
						required: true,
						message: '请选择项目',
					},
				}
			}
		},
		methods: {
			materialSelect(e){
				if(e.value&&e.value.length>0){
					this.postData.unitPrice = e.value[0].unitPrice
				}
			},
			SignHandler(e){
				console.log(e)
				this.postData.signedImg = e.fileName
			},
			saveData(){
				this.$refs.uForm.validate().then(res=>{
					if(res){
						this.postData.totalAmount = this.totalPrice
						saveApply(this.postData).then(res=>{
							this.$modal.msg("新建成功")
							uni.$emit("apply-refresh", true)
							this.$tab.navigateBackDelay()
						})
					}
					
				})
				
			}
		}
	}
</script>

<style>

</style>